<template>
  <div class="org-list">
    <div class="org-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>用户与权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>邀请用户-配置权限</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="permission-config-operator">
      <div>
        <span>已选择{{this.$store.state.signForm.inviteUserList.length}}人</span>
        <el-button @click="cancel">返回修改</el-button>
      </div>
      <div>
        <span>通知方式</span>
        <el-checkbox-group
          v-model="notition"
          :min="1"
          :max="2">
          <el-checkbox label="短信" >短信</el-checkbox>
          <el-checkbox label="邮件" >邮件</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="permission-config-container">
      <div class="permission-config-table">
        <div class="user-filter">
          <el-input v-model="filterStr" size="small" clearable placeholder="权限名称/权限编号"></el-input>
        </div>
        <el-table
          :data="filteredList"
          ref="multipleTable"
          border
          @select="handleSelect"
          @select-all="handleSelectAll">
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="权限编号">
          </el-table-column>
          <el-table-column
            prop="permName"
            label="权限名称">
          </el-table-column>
        </el-table>
      </div>
      <div class="permission-config-list">
        <el-table
          :data="selectedPermission"
          height="600">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            label="功能名称"
            prop="permName"
            width="200">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="deletePermission(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="button-group">
      <el-button @click="cancel">上一步</el-button>
      <el-button type="primary" :disabled="selectedPermission.length === 0" @click="submit">一键邀请</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "permission-config",
    data() {
      return ({
        permissionList: [],
        selectedPermission: [],
        filterStr: '',
        notition: ['短信']
      })
    },
    computed: {
      filteredList: function() {
        return this.permissionList.filter(item => item.id.toString().indexOf(this.filterStr) > -1 || item.permName.indexOf(this.filterStr) > -1)
      },
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$http.post(this.GLOBAL.host, {
          "method":"Permission_BaseList",
          "query":{}
        }).then(res => {
          loading.close()
          this.permissionList = res.data.data
        })
      },
      deletePermission(row) {
        this.selectedPermission = _.reject(this.selectedPermission, item => item.id === row.id)
        this.$refs.multipleTable.toggleRowSelection(row);
      },
      updateData(data) {
        this.$store.commit('updateSignForm', data)
      },
      cancel() {
        this.selectedPermission = []
        this.$router.back()
      },
      submit() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$http.post(this.GLOBAL.host, {
          method:"User_Invite",
          data: {
            empList: this.$store.state.signForm.inviteUserList.map(item => _.pick(item, ['id', 'phone', 'email'])),
            permIdArr: this.selectedPermission.map(item => item.id),
            usePhone: _.indexOf(this.notition, '短信') > -1,
            useEmail: _.indexOf(this.notition, '邮件') > -1,
          }
        }).then(res => {
          loading.close()
          if (res.data.code == 200) {
            this.$message({
              message: res.data.data || '邀请成功',
              type: 'success'
            });
            this.selectedPermission = []
            this.updateData({
              inviteUserList: [],
            })
            this.$router.push('/full/organization/user')
          } else {
            this.$message({
              message: res.data.data,
              type: 'error'
            });
          }
        })
      },
      updateData(data) {
        this.$store.commit('updateSignForm', data)
      },
      handleSelect(selection, row) {
        if (_.some(this.selectedPermission, item => item.id === row.id)) {
          this.selectedPermission = _.reject(this.selectedPermission, item => item.id === row.id)
        } else {
          this.selectedPermission = _.concat(this.selectedPermission, row)
        }
      },
      handleSelectAll(selection, row) {
        if (selection.length > 0) {
          this.selectedPermission = selection
        } else {
          this.selectedPermission = []
        }
      },
    },
    // computed: {
    //   multipleSelection: function() {
    //     return _.concat(this.$store.state.signForm.inviteUserList, this.selectedPerson)
    //   }
    // },
  }
</script>

<style lang="less">
  .user-filter {
    width: 300px;
  }
  .permission-config-container {
    display: flex;
  }
  .permission-config-table {
    flex-basis: 400px;
    flex-grow: 1;
    flex-shrink: 0;
  }
  .permission-config-list {
    flex: 400px 0 1;
    margin-left: 20px;
  }
  .org-position {
    > .el-select {
      width: 150px;
    }
  }
  .org-filter {
  }
  .org-list {
    padding: 10px 20px;
  }
  .button-group {
    text-align: center;
  }
  .permission-config-operator {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
  }
</style>
